<!DOCTYPE html>

<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="rogepi" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/style.css" />
    <script src="/vue.global.js"></script>
    <title>1-prop-verification.html</title>
  </head>

  <body>
    <div id="prop-verification">
      <my-component></my-component>
    </div>
    <script>
      const app = createApp({});

      app.component('my-component', {
        props: {
          // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
          propA: Number,
          // 多个可能的类型
          propB: [String, Number],
          // 必填的字符串
          propC: {
            type: String,
            required: true,
          },
          // 带有默认值的数字
          propD: {
            type: Number,
            default: 100,
          },
          // 带有默认值的对象
          propE: {
            type: Object,
            // 对象或数组默认值必须从一个工厂函数获取
            default: function () {
              return { message: 'hello' };
            },
          },
          // 自定义验证函数
          propF: {
            validator: function (value) {
              // 这个值必须匹配下列字符串中的一个
              return ['success', 'warning', 'danger'].indexOf(value) !== -1;
            },
          },
          // 具有默认值的函数
          propG: {
            type: Function,
            // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
            default: function () {
              return 'Default function';
            },
          },
        },
      });

      app.mount('#prop-verification');
    </script>
  </body>
</html>
